<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DictType列表</title>
    <link rel="stylesheet" href="static/css/index.css">
    <script type="text/javascript" src="static/js/jquery-3.7.1.min.js"></script>
    <script>
        $(function () {
            getDictList();
        })

        function getDictList() {
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/getDictTypeList",
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    console.log(data)
                    var info = `<table id="table1">
                        <tr><td colspan="9">数据展示&nbsp&nbsp<a href="#" onclick="showAddTable()">添加数据</a><a id="time"></a></td></tr>
                        <tr>
                            <td>dict_id</td>
                            <td>dict_name</td>
                            <td>dict_type</td>
                            <td>status</td>
                            <td>create_by</td>
                            <td>update_by</td>
                            <td>remark</td>
                            <td colspan="2">操作</td>
                        </tr>`
                    for (const datum of data) {
                        // console.log(datum)
                        info += `
                        <tr>
                            <td>${datum.dictId}</td>
                            <td>${datum.dictName}</td>
                            <td>${datum.dictType}</td>
                            <td>${datum.status}</td>
                            <td>${datum.createBy}</td>
                            <td>${datum.updateBy}</td>
                            <td>${datum.remark}</td>
                            <td><a href="#" onclick="showEditDict(${datum.dictId})">修改</a></td>
                            <td><a href="#" onclick="delDictViaId(${datum.dictId})">删除</a></td>
                        </tr>
                        `
                    }
                    info += `</table>`
                    // jQ 将组合好的元素插入(replace)到div
                    $("#DictList").html(info)
                }
            })
        }

        function delDictViaId(id) {
            console.log(id)
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/deleteDictType",
                type: "POST",
                dataType: "json",
                data: {'dictId': id},
                success: function (data) {
                    console.log(data)
                    alert(data)
                    // 使用alert阻塞自动刷新
                    // location.reload()
                    getDictList()
                }
            })
        }

        function showAddTable() {
            var add = `<table>
        <tr>
            <td colspan="9">数据添加</td>
        </tr>
        <tr>
                            <td>dict_name</td>
                            <td>dict_type</td>
                            <td>status</td>
                            <td>create_by</td>
                            <td>update_by</td>
                            <td>remark</td>
            <td colspan="2">操作</td>
        </tr>
        <tr>
            <td><input id="dictName"></td>
            <td><input id="dictType"></td>
            <td><input id="status"></td>
            <td><input id="createBy"></td>
            <td><input id="updateBy"></td>
            <td><input id="remark"></td>
            <td colspan="1"><a href="#" onclick="addDictType()">添加</a></td>
            <td colspan="1"><a href="#" onclick="removeAddTable()">关闭</a></td>
        </tr>
    </table>`
            $("#addDictTable").html(add)
        }

        function addDictType() {
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/addDictType",
                type: "POST",
                dataType: "json",
                data: {
                    // jQ, 使用 $('#id').val() 的方式直接获取input中的值
                    'dictName': $('#dictName').val(),
                    'dictType': $('#dictType').val(),
                    'status': $('#status').val(),
                    'createBy': $('#createBy').val(),
                    'updateBy': $('#updateBy').val(),
                    'remark': $('#remark').val()
                },
                success: function (data) {
                    console.log(data)
                    alert(data)
                    // 使用alert阻塞自动刷新
                    // location.reload()
                    getDictList()
                }
            })
        }



        function showEditDict(dict_id) {
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/getDictTypeList?dict_id=" + dict_id,
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    // console.log(data[0])
                    var edit = `<table id="table2">
                        <tr>
                            <td colspan="9">数据修改</td>
                        </tr>
                        <tr>
                            <td>dict_id</td>
                            <td>dict_name</td>
                            <td>dict_type</td>
                            <td>status</td>
                            <td>create_by</td>
                            <td>update_by</td>
                            <td>remark</td>
                            <td colspan="2">操作</td>
                        </tr>
                        <tr>
                            <td>${data[0].dictId}</td>
                            <td><input type="text" id="text1" value="${data[0].dictName}"></td>
                            <td><input type="text" id="text2" value="${data[0].dictType}"></td>
                            <td><input type="text" id="text3" value="${data[0].status}"></td>
                            <td><input type="text" id="text4" value="${data[0].createBy}"></td>
                            <td><input type="text" id="text5" value="${data[0].updateBy}"></td>
                            <td><input type="text" id="text6" value="${data[0].remark}"></td>
                            <td><a href="#" onclick="doEditDict([${data[0].dictId},$('#text1').val(),$('#text2').val(),$('#text3').val(),$('#text4').val(),$('#text5').val(),$('#text6').val()])">提交修改</a></td>
                            <td><a href="#" onclick="removeEditTable()">关闭</a></td>
                        </tr></table>`
                    $("#editDictTable").html(edit)
                }
            })

        }

        function doEditDict(list) {
            console.log(list)
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/updateDictType",
                type: "POST",
                dataType: "json",
                data: {
                    'dictId': list[0],
                    'dictName': list[1],
                    'dictType': list[2],
                    'status': list[3],
                    'createBy': list[4],
                    'updateBy': list[5],
                    'remark': list[6],
                },
                success: function (data) {
                    console.log(data)
                    alert(data)
                    // 使用alert阻塞自动刷新
                    location.reload()
                    // getRQList()
                }
            })
        }

        function removeAddTable() {
            $("#addDictTable").html(``)
        }

        function removeEditTable() {
            $("#editDictTable").html(``)
        }


    </script>
</head>
<body>
<div id="DictList"></div>
<br>
<div id="addDictTable">
</div>
<br>
<div id="editDictTable"></div>
</body>
</html>